<script setup>
    import axios from "axios";
    import {onMounted, ref} from "vue";

    let klineImage=ref('')
    let priceCurveImage=ref('')
    let tintradayImage=ref('')

    function fetchKlineData() {
        axios.get('http://127.0.0.1:5000/get_kline/000543.SZ/D')
            .then(response => {
                klineImage.value = response.data.image;
            })
            .catch(error => {
                console.error("Error fetching K-line data:", error);
            });
    }

    function   fetchPriceCurveData() {
        axios.get('http://127.0.0.1:5000/get_price_curve/000543.SZ/D')
            .then(response => {
                priceCurveImage.value = response.data.image;
            })
            .catch(error => {
                console.error("Error fetching price curve data:", error);
            });
    }

    function fetchIntradayData() {
        axios.get('http://127.0.0.1:5000/get_intraday_data/000543.SZ')
            .then(response => {
                tintradayImage.value = response.data.image;
            })
            .catch(error => {
                console.error("Error fetching intraday data:", error);
            });
    }

    onMounted(()=>{
        fetchKlineData()
        fetchPriceCurveData()
        fetchIntradayData()
    })
</script>

<template>
    <div>
        <h1>股票数据</h1>
        <div>
            <h3>K线图</h3>
            <img :src="'data:image/png;base64,' + klineImage" alt="K线图" />
        </div>
        <div>
            <h3>价格曲线图</h3>
            <img :src="'data:image/png;base64,' + priceCurveImage" alt="价格曲线图" />
        </div>
        <div>
            <h3>分时数据图</h3>
            <img :src="'data:image/png;base64,' + tintradayImage" alt="分时数据图" />
        </div>
    </div>
</template>

<style>

</style>